<template>
  <div class="item">
    <img :src="data.image" alt="" class="itemUrl">
    <div class="item_right">
      <div class="itemName">{{data.title}}</div>
      <div class="itemMoney">
        <div class="i_money">
          <div><span>双人团￥</span>{{data.price}}</div>
          <div>单买￥{{data.groupon_price}}</div>
        </div>
        <div class="group" @click="group(data.id)">去拼团</div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "allitem",
        props:['data'],
        data(){
          return {

          }
        },
        methods:{
          group(id){
            this.$router.push({
              name:'groupDetails',
              query:{id:id}
            })
          }
        }
    }
</script>

<style scoped>
  .item {
    width: 100%;
    box-sizing: border-box;
    padding: .10rem .2rem .10rem .08rem;
    background-color: #FFFFFF;
    border-radius: .08rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .1rem;
  }
  .itemUrl {
    width: 1.23rem;
    height: 1.23rem;
    border-radius: .08rem;
  }
  .item_right {
    width: calc(100% - 1.23rem);
    height: 1.23rem;
    box-sizing: border-box;
    padding: .03rem 0 .03rem .14rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .itemName {
    width: 100%;
    max-height: .6rem;
    font-size: .14rem;
    font-weight: 500;
    color: #333333;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .itemMoney {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }
  .group {
    width:.77rem;
    height:.3rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.15rem;
    text-align: center;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    line-height: .3rem;
    color: #ffffff;
  }
  .i_money {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .i_money>div:nth-child(1) {
    font-size: .2rem;
    color: #FF6187;
    font-weight: bold;
  }
  .i_money>div:nth-child(1)>span {
    font-size: .14rem;
    line-height: .14rem;
  }
  .i_money>div:nth-child(2) {
    font-size: .14rem;
    color: #999999;
    text-decoration: line-through;
  }
</style>
